<template>
  <div class="baseContainer member">
    <CollapseTransiton>
      <div
        v-if="checkList.length >0"
        style="position: fixed;z-index: 10;
        right: 0;height: 50px;background:#f2f2f2;top: 60px;padding: 10px;box-sizing: border-box;"
        class="CollapseTransiton"
      >
        <div style="display: inline-block;width: 100%;position: relative;">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">&nbsp;</el-checkbox>
          <el-button type="gray" size="mini" plain @click="delPerson">删除</el-button>
          <!-- <el-button type="gray" size='mini' plain @click="exportAll">导出</el-button> -->
          <i class="el-icon-error " style="position: absolute; right: 20px;  font-size: 24px;  top: 3px; color: gray; cursor: pointer;" @click="checkList = []" />
        </div>
      </div>
    </CollapseTransiton>
    <div class="content">
      <div class="left baseBoderShadow bgWhite baseBorderRadius">
        <div class="seachBox">
          <el-input v-model.trim="seachName_jg" placeholder="请输入机构名称" clearable @keyup.enter.native="search_jg">
            <i slot="suffix" class="el-icon-search" style="line-height: 36px; width: 30px;cursor: pointer;" @click="search_jg" />
          </el-input>
        </div>
        <div class="btnGroup" style="padding-top: 10px;">
          <div class="btnItem" @click="function(){addMember(1)}">
            <span class="add">
              <i class="el-icon-plus" />
            </span>
            添加
          </div>
          <div class="btnItem" @click="function(){addMember(2)}">
            <span class="edit">
              <i class="el-icon-edit" />
            </span>
            编辑
          </div>
          <div class="btnItem" @click="delDepartment">
            <span class="del">
              <i class="el-icon-delete" />
            </span>
            删除
          </div>
        </div>
        <div id="greenTree" class="scroBox" style=" height: 624px;">
          <el-scrollbar :wrap-style="[{ 'height': '100%' }]">
            <el-tree ref="tree" :data="treeDate" :default-expanded-keys="keysArr" :current-node-key="currentNodekey" :props="defaultProps" node-key="id" highlight-current @node-click="nodeClick">
              <template slot-scope="{ node, data }">
                <span :title="data.zzjg_name" class="overSpan">{{ data.zzjg_name }}</span>
              </template>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <div class="right baseBoderShadow bgWhite baseBorderRadius">
        <div style=" padding: 20px;">
          <el-input v-model.trim="seachName" style="width:260px" class="seachInput" placeholder="搜索全部用户" clearable @focus="showEmpty" @clear="clearInPut" @keyup.enter.native="seachBtn">
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
          <el-button type="warning" @click="seachBtn">搜索</el-button>
          <div v-if="byJgFlag" style="float:right">
            <el-button type="primary" @click="addUser">添加</el-button>
          </div>
        </div>
        <div v-if="isEmpty" class="noData">
          <img src="../../../../public/public/img/empty.png">
        </div>
        <div v-else style="padding:30px">
          <div style="position: relative;" class="checkLableNone">
            <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
              <el-table :data="tableData" style="width: 100%" @row-click="checkGroup" @cell-mouse-enter="tableHoverChange" @cell-mouse-leave="tableLeaveChange">
                <el-table-column width="80" align="center">
                  <template slot-scope="scope">
                    <template v-if="byJgFlag">
                      <template v-if="scope.row.isHover==true || checkList.indexOf(scope.row.id) !== -1">
                        <el-checkbox :label="scope.row.id" style="margin-left:18px">&nbsp;</el-checkbox>
                      </template>
                      <template v-else>
                        {{ pageSize * (currentPage - 1) + 1 + scope.$index }}
                      </template>
                    </template>
                    <template v-else>
                      <template v-if="(scope.row.isHover==true || checkList.indexOf(scope.row.checkId) !== -1)">
                        <el-checkbox :label="scope.row.checkId">&nbsp;</el-checkbox>
                      </template>
                      <template v-else>
                        {{ pageSize * (currentPage - 1) + 1 + scope.$index }}
                      </template>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="姓名" align="center">
                  <template slot-scope="scope">
                    <div class="imgIsManager">
                      {{ scope.row.userName }}
                      <span v-if="scope.row.is_manager==1">
                        <i class="el-icon-user-solid" style="color:#02c58d" />
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="帐号" align="center">
                  <template slot-scope="scope">
                    <div class="imgIsManager">
                      {{ scope.row.userCode }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-if="!byJgFlag" prop="zzjg" label="所属部门" align="center" />
                <el-table-column label="操作" align="center" width="300">
                  <template slot-scope="scope">
                    <el-button type="primary" round size="mini" @click="editUser(scope.row)">编辑</el-button>
                    <template v-if="byJgFlag">
                      <el-button type="warning" round size="mini" @click="setPsd(scope.row)">设置密码</el-button>
                      <el-button :disabled="scope.row.is_manager==1" type="primary" class="btnBlue" round size="mini" @click="setFzr(scope.row)">设置负责人</el-button>
                    </template>
                    <template v-else>
                      <el-button type="warning" round size="mini" @click="setPsd(scope.row)">设置密码</el-button>
                      <el-button :disabled="scope.row.is_manager==1" type="primary" class="btnBlue" round size="mini" @click="setFzr(scope.row)">设置负责人</el-button>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </el-checkbox-group>
          </div>
          <div v-show="totalPage" style="margin-top: 25px;text-align: center;padding-bottom:15px">
            <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加机构名称 -->
    <el-dialog :visible.sync="dialogVisible" title="添加机构" width="1000px">
      <el-form ref="form" label-width="85px">
        <el-form-item label="父级机构1">
          <span>{{ currentName }}</span>
        </el-form-item>
        <el-form-item label="机构类型" required>
          <el-select v-model="jgType" placeholder="请选择机构类型" style="width: 374px;">
            <el-option v-for="item in jgOptions" :key="item.dm" :label="item.mc" :value="item.dm" />
          </el-select>
        </el-form-item>
        <el-form-item label="机构名称" required>
          <el-input v-model.trim="addNewJgMc" placeholder="请输入机构名称" />
        </el-form-item>
        <el-form-item label="店铺位置">
          <select-map
            v-if="locationShow"
            ref="baidumap1"
            :input-default="selectedLocation.fullInfo"
            :lng.sync="locationInfo.jd"
            :lat.sync="locationInfo.wd"
            :map-key="globalMapKey"
            @changedw="selectdw"
          />
        </el-form-item>
      </el-form>
      <div style="padding-left:78px">
        <el-button type="primary" @click="function(){submit_editMember(1)}">提交</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑机构名称 -->
    <el-dialog :visible.sync="dialogVisible_edit" :title="jgTite" width="1000px">
      <el-form ref="form" label-width="120px">
        <!-- <el-form-item label="机构名称">
          <span>{{currentName}}</span>
        </el-form-item> -->
        <el-form-item label="机构名称" required>
          <el-input v-model.trim="editNewJgMc" placeholder="请输入机构名称" />
        </el-form-item>
        <el-form-item label="机构类型" required>
          <el-select v-model="jgType_edit" placeholder="请选择机构类型" style="width: 340px;">
            <el-option v-for="item in jgOptions" :key="item.dm" :label="item.mc" :value="item.dm" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属品牌" required>
          <el-select v-model="jgBrand_edit" placeholder="请选择机构所属品牌" style="width: 340px;">
            <el-option v-for="item in jgBrands" :key="item.dm" :label="item.mc" :value="item.dm" />
          </el-select>
        </el-form-item>
        <el-form-item label="店铺联系方式" required>
          <el-input v-model.trim="editNewJgPhone" placeholder="请输入店铺联系方式" />
        </el-form-item>
        <el-form-item label="是否闭店" required>
          <el-switch
            v-model="isClose"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="营业时间" required>
          <el-time-picker
            v-model="openTime"
            :picker-options="{
     selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="任意时间点">
          </el-time-picker>
          <el-time-picker
            arrow-control
            v-model="endTime"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="店铺位置">
          <select-map
            v-if="locationShow"
            ref="baidumap"
            :input-default="selectedLocation.fullInfo"
            :oldmarker="mapCenter"
            :lng.sync="locationInfo.jd"
            :lat.sync="locationInfo.wd"
            :map-key="globalMapKey"
            @changedw="selectdw"
          />
        </el-form-item>

      </el-form>
      <div style="padding-left:78px">
        <el-button type="primary" @click="submit_editMember">提交</el-button>
        <el-button @click="dialogVisible_edit=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 添加机构名称 -->
    <el-dialog :visible.sync="dialogVisible_addUser" :title="titleUser" width="500px">
      <div style="min-height:120px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="账号" prop="userCode">
            <el-input v-model.trim="form.userCode" :disabled="isEdit" />
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="form.userName" />
          </el-form-item>
          <el-form-item v-if="!isEdit" label="密码" prop="pass">
            <el-input v-model.trim="form.pass" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色" prop="roleList">
            <el-select v-model="form.roleList" style="width:100%" multiple placeholder="请选择">
              <el-option v-for="item in options_user" :key="item.id" :label="item.roleName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>

        <div style="padding-left:80px">
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
          <el-button @click="dialogVisible_addUser=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑机构名称 -->
    <el-dialog :visible.sync="dialogVisible_psd" title="设置密码" width="500px">
      <el-form ref="form" label-width="120px">
        <el-form-item label="姓名">
          <span>{{ currentUserName }}</span>
        </el-form-item>
        <el-form-item label="设置登录密码" required>
          <el-input v-model.trim="password" type="password" placeholder="请输入登录密码" />
        </el-form-item>
      </el-form>
      <div style="padding-left:120px">
        <el-button type="primary" @click="submit_psd">保存</el-button>
        <el-button @click="dialogVisible_psd=false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import CollapseTransiton from "@/components/elTransition/elTransition.js";
import selectMap from "../select-map.vue";
export default {
  components: {
    CollapseTransiton,
    "select-map": selectMap
  },
  data() {
    return {
      openTime:'',
      endTime:'',
      isClose: false,
      jgTite: "添加机构",
      operTypeJG: 1, // 1 为添加 2 为编辑
      userZzjg: [],
      firstId: "",
      emptyCurrentId: "",
      isEmpty: false,
      isShow: false,
      jgType_edit: "",
      jgBrand_edit: "",
      byJgFlag: true,
      seachName_jg: "",
      seachName: "",
      treeDate: [],
      defaultProps: {
        label: "zzjg_name",
        value: "id",
        children: "children"
      },
      currentNodekey: "",
      editNewJgPhone: "",
      keysArr: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      checkAll: false,
      isIndeterminate: false,
      checkList: [],
      allcheckbox: [],
      dialogVisible: false,
      addNewJgMc: "", // 添加机构名称，
      currentName: "",
      currentId: "",
      parentId: "",
      editNewJgMc: "",
      dialogVisible_edit: false,
      tree_show: true,
      currentUserName: "",
      password: "",
      currentUserId: 0,
      dialogVisible_psd: false,
      jgOptions: [],
      jgBrands: [],
      jgType: "",
      edit_parentId: "",
      addyhShow: false,
      dialogVisible_addUser: false, // 新增用户
      form: {
        userCode: "",
        userName: "",
        pass: "",
        roleList: []
      },
      rules: {
        userCode: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
        ],
        roleList: [
          {
            type: "array",
            required: true,
            message: "请选择角色",
            trigger: "change"
          }
        ]
      },
      options_user: [],
      nowId: "",
      isEdit: false,
      titleUser: "添加用户",
      locationShow: true,
      locationInfo: {
        jd: "",
        wd: ""
      },
      selectedLocation: {
        fullInfo: ""
      },
      mapCenter: ""
    };
  },
  watch: {},
  mounted() {
    this.sysRole();
    this.getCurrentUserZzjgs();
    this.getDepartmentList();
    this.getZzjgType();
    this.getZzjgBrand();
    //  this.$refs.baidumap.makerCenter({ lng: res.data.jd, lat: res.data.wd });
  },
  methods: {
    /**
     * @name selectdw
     * @description 选中点
     * @param {}
     * @author cjs
     * @date 2021-07-26 19:54:46
     */
    selectdw(param) {
      console.log("param" + JSON.stringify(param));
      const { lat, lng, nation, province, city, district, street, street_number, formatted_addresses } = param;
      this.selectedLocation = param;
      this.locationInfo.jd = lng;
      this.locationInfo.wd = lat;
      this.selectedLocation.fullInfo = province + city + district + street + street_number + formatted_addresses.recommend;
      // this.z
    },
    /**
     * @name checkGroup
     * @description 点击table row获取选择的checkList
     * @author wqy
     * @date 2020-06-04 10:23:03
     */
    checkGroup(data, comm) {
      if (comm.label && comm.label != "操作") {
        if (this.checkList.indexOf(data.id) == -1) {
          this.checkList = [...this.checkList, data.id];
        } else {
          this.checkList.splice(
            this.checkList.findIndex(value => value == data.id),
            1
          );
        }
      }
    },
    /**
     * @name getCurrentUserZzjgs
     * @description 所在机构 从而在机构树中高亮展示
     * @author wqy
     * @date 2019-10-31 10:18:29
     */
    async getCurrentUserZzjgs() {
      this.userZzjg = [];
      const res = await this.$store.dispatch("qxgl-yhzzgl/getCurrentUserZzjgs");
      // this.userZzjg = [1];
      res.data.map(item => {
        this.userZzjg = [];
        this.userZzjg = [...this.userZzjg, item.zzjgId - 0];
      });
    },
    /**
     * @name getZzjgType
     * @description 机构类型
     * @author wqy
     * @date 2019-10-31 10:18:29
     */
    async getZzjgType() {
      const res = await this.$store.dispatch("qxgl-yhzzgl/getZzjgType");
      this.jgOptions = res.data || [];
    },
    /**
     * @name getZzjgBrand
     * @description 机构类型
     * @author wqy
     * @date 2019-10-31 10:18:29
     */
    async getZzjgBrand() {
      const res = await this.$store.dispatch("qxgl-yhzzgl/getZzjgBrand");
      console.log("---->", res.data);
      this.jgBrands = res.data || [];
    },
    /**
     * @name search_jg
     * @description 搜索机构
     * @author wqy
     * @date 2019-10-31 10:20:21
     */
    async search_jg() {
      const data = {
        searchName: this.seachName_jg
      };
      const res = await this.$store.dispatch(
        "qxgl-yhzzgl/getDepartmentList",
        data
      );
      this.treeDate = res.data;
      // 清空右侧
      this.checkAll = false;
      this.isIndeterminate = false;
      this.checkList = [];
      this.currentPage = 1;
      this.seachName = "";
    },
    /**
     * @name getDepartmentList
     * @description 获取第一级别的树形结构
     * @author wqy
     * @date 2019-10-31 10:10:24
     */
    async getDepartmentList() {
      const data = {
        searchName: this.seachName_jg
      };
      const res = await this.$store.dispatch(
        "qxgl-yhzzgl/getDepartmentList",
        data
      );
      this.treeDate = res.data;
      const id = res.data[0].id;
      this.currentName = res.data[0].zzjg_name;
      this.currentId = id;
      this.firstId = id; // 记录最高级别的id
      // 设置默认选中并高亮显示
      if (this.userZzjg.length !== 0) {
        this.keysArr = this.userZzjg;
        this.currentId = this.userZzjg[0];
        this.currentNodekey = this.userZzjg[0];
      } else {
        this.currentNodekey = id;
        this.keysArr.push(id);
      }
      this.$nextTick(() => {
        const tree = this.$refs.tree;
        tree.setCurrentKey(this.currentId); // 指定选中的节点
        // getCurrentNode 获取当前节点的信息
        const currentNode = this.$refs.tree.getCurrentNode();
        this.currentName = currentNode.zzjg_name;
        this.parentId = currentNode.parent_id;
        // 根据组织机构查询用户
        this.getUserByZzjg();
      });
    },
    /**
     * @name nodeClick
     * @description 点击树形结构
     * @author wqy
     * @date 2019-10-31 10:32:34
     */
    nodeClick(data, currentNode, node) {
      this.currentId = data.id;
      this.currentName = data.zzjg_name;
      this.parentId = data.parent_id;

      this.isEmpty = false; // 全局搜索，输入框当前是否为空
      this.byJgFlag = true; // 当前为组织机构的获取的列表
      // 清空多选框
      this.seachName = "";
      this.resetData();
      this.getUserByZzjg(); // 根据组织机构查询用户
    },
    /**
     * @name addMember
     * @description 打开添加机构弹窗
     * @author wqy
     * @date 2019-10-31 10:18:29
     *  <el-form-item label="机构名称" required>
     <el-input v-model.trim="editNewJgMc" placeholder="请输入机构名称" />
     </el-form-item>
     <el-form-item label="机构类型" required>
     <el-select v-model="jgType_edit" placeholder="请选择机构类型" style="width: 340px;">
     <el-option v-for="item in jgOptions" :key="item.dm" :label="item.mc" :value="item.dm" />
     </el-select>
     </el-form-item>
     <el-form-item label="店铺位置">
     <select-map
     v-if="locationShow"
     ref="baidumap"
     :input-default="selectedLocation.fullInfo"
     :lng.sync="locationInfo.jd"
     :lat.sync="locationInfo.wd"
     :map-key="globalMapKey"
     @changedw="selectdw"
     />
     </el-form-item>
     *
     *
     */
    addMember(operType) {
      if (operType === 2) {
        this.jgTite = "编辑机构";
        this.editMember();
        return;
      }
      this.operTypeJG = 1;
      this.jgType = "";
      this.addNewJgMc = "";
      this.editNewJgMc = "";
      this.jgType_edit = "";
      this.selectedLocation.fullInfo = "";
      this.isClose = false;
      this.openTime = '';
      this.endTime = '';
      if (this.currentId) {
        this.dialogVisible_edit = true;
      } else {
        this.$message({
          type: "warning",
          message: "请选择一个机构!"
        });
        return;
      }
    },
    /**
     * @name submit_addMember
     * @description 添加机构-确认
     * @author wqy
     * @date 2019-10-31 10:20:21
     */
    async submit_addMember() {
      if (this.jgType_edit === "") {
        this.$message({
          type: "warning",
          message: "请选择机构类型!"
        });
        return;
      }
      if (this.jgBrand_edit === "") {
        this.$message({
          type: "warning",
          message: "请选择机构所属品牌!"
        });
        return;
      }
      if (this.editNewJgMc == "") {
        this.$message({
          type: "warning",
          message: "请输入机构名称!"
        });
        return;
      }
      /**
         * param{"lat":34.773780992807254,"lng":113.64686965942383,"nation":"中国",
         * "province":"河南省","city":"郑州市","district":"金水区","street":"纺机前街","street_number":"纺机前街",
         * "formatted_addresses":{"rough":"苏园(黄河路店)","recommend":"苏园(黄河路店)"}}
         */
      let openHour = this.openTime.getHours();
      let openMinute = this.openTime.getMinutes();
      let openSec = this.openTime.getSeconds();
      let timeOpenTime = openHour+":"+openMinute+":"+openSec;

      let endHour = this.endTime.getHours();
      let endMinute = this.endTime.getMinutes();
      let endSec = this.endTime.getSeconds();
      let timeEndTime = endHour+":"+endMinute+":"+endSec;
      const res = await this.$store.dispatch("qxgl-yhzzgl/addDepartment", {
        parentId: this.currentId,
        zzjgType: this.jgType_edit,
        zzjgName: this.editNewJgMc,
        zlat: this.selectedLocation.lat,
        zlng: this.selectedLocation.lng,
        sheng: this.selectedLocation.province,
        shi: this.selectedLocation.city,
        quxian: this.selectedLocation.district,
        jiedao: this.selectedLocation.fullInfo,
        brandId: this.jgBrand_edit,
        phone: this.editNewJgPhone,
        isClose: this.isClose?1:0,
        openTime: timeOpenTime,
        endTime: timeEndTime

      });
      this.dialogVisible_edit = false;
      //  刷新当前树形结构
      this.keepCurrenKey(this.currentId);
      this.$message({
        type: "success",
        message: "添加机构成功!"
      });
    },
    /**
     * @name editMember
     * @description 打开编辑机构弹窗
     * @author wqy
     * @date 2019-10-31 10:18:29
     */
    editMember() {
      this.operTypeJG = 2;
      if (this.currentId) {
        this.getSysZzjgById();
        this.dialogVisible_edit = true;
      } else {
        this.$message({
          type: "warning",
          message: "请选择一个部门!"
        });
        return;
      }
    },
    /**
     * @name getSysZzjgById
     * @description 编辑机构获取信息
     * @author wqy
     * @date 2019-11-07 09:55:11
     */
    async getSysZzjgById() {
      const res = await this.$store.dispatch("qxgl-yhzzgl/getSysZzjgById", {
        id: this.currentId
      });
      /**
       * createTime: "2021-07-12T19:57:10.000+0800"
       id: 3
       jiedao: "河南省郑州市中原区翠竹街翠竹街6-7号国家863中部软件园(翠竹街)"
       mchId: "1612529758"
       mchKey: null
       orderSeq: 3
       parentId: 2
       quxian: "中原区"
       sheng: "河南省"
       shi: "郑州市"
       status: 1
       updateTime: "2021-08-12T20:20:00.000+0800"
       zlat: 34.81717
       zlng: 113.5614
       zzjgCode: null
       zzjgName: "高新区分店1"
       zzjgType: "2"
       :input-default="selectedLocation.fullInfo"
       :lng.sync="locationInfo.jd"
       :lat.sync="locationInfo.wd"
       */
      const { jiedao, zlat, zlng } = res.data;
      console.log("编辑的一方", res.data);
      this.mapCenter = zlat + "," + zlng;

      console.log("aaa", this.mapCenter);

      this.editNewJgMc = res.data.zzjgName;
      this.jgType_edit = res.data.zzjgType;
      this.edit_parentId = res.data.parentId;
      this.selectedLocation.fullInfo = jiedao;
      this.locationInfo.jd = zlng;
      this.locationInfo.wd = zlat;
      this.editNewJgPhone = res.data.phone;
      this.isClose = res.data.isClose;
      this.openTime = new Date("2022-07-29 " +res.data.openTime);
      this.endTime = new Date("2022-07-29 " +res.data.endTime);
      console.log("aaaaaaa",new Date("2022-07-29 " +res.data.openTime))
      this.jgBrand_edit = res.data.brandId;
    },
    /**
     * @name submit_editMember
     * @description 添加机构-确认
     * @author wqy
     * @date 2019-10-31 10:20:21
     */
    async submit_editMember() {
      //alert(this.operTypeJG);
      if (this.operTypeJG == 1) { // 添加
        this.submit_addMember();
        return;
      }
      if (this.editNewJgMc == "") {
        this.$message({
          type: "warning",
          message: "请输入新的机构名称!"
        });
        return;
      }
      if (this.jgBrand_edit === "") {
        this.$message({
          type: "warning",
          message: "请选择机构所属品牌!"
        });
        return;
      }
      console.log("??",this.selectedLocation)
      let openHour = this.openTime.getHours();
      let openMinute = this.openTime.getMinutes();
      let openSec = this.openTime.getSeconds();
      let timeOpenTime = openHour+":"+openMinute+":"+openSec;

      let endHour = this.endTime.getHours();
      let endMinute = this.endTime.getMinutes();
      let endSec = this.endTime.getSeconds();
      let timeEndTime = endHour+":"+endMinute+":"+endSec;
      console.log(timeEndTime)
      const res = await this.$store.dispatch("qxgl-yhzzgl/editDepartment", {
        id: this.currentId,
        parentId: this.edit_parentId,
        zzjgType: this.jgType_edit,
        zzjgName: this.editNewJgMc,
        zlat: this.locationInfo.wd,
        zlng: this.locationInfo.jd,
        sheng: this.selectedLocation.province,
        shi: this.selectedLocation.city,
        quxian: this.selectedLocation.district,
        jiedao: this.selectedLocation.fullInfo,
        brandId: this.jgBrand_edit,
        phone: this.editNewJgPhone,
        isClose: this.isClose?1:0,
        openTime: timeOpenTime,
        endTime: timeEndTime
      });
      this.dialogVisible_edit = false;
      //  刷新当前树形结构
      this.keepCurrenKey(this.currentId);
      this.$message({
        type: "success",
        message: "编辑机构成功!"
      });
    },
    /**
     * @name delDepartment
     * @description 删除组织机构
     * @author wqy
     * @date 2019-10-31 10:20:21
     */
    async delDepartment() {
      if (!this.currentId) {
        this.$message({
          type: "warning",
          message: "请选择您要删除删除的机构!"
        });
        return;
      }
      this.$confirm(
        "删除后将无法恢复，您确认删除" + this.currentName + "吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async() => {
          const res = await this.$store.dispatch("qxgl-yhzzgl/delDepartment", {
            id: this.currentId
          });
          this.$message({
            type: "success",
            message: "删除机构成功!"
          });
          //  刷新当前树形结构
          this.keepCurrenKey(this.parentId);
        })
        .catch(() => {});
    },
    /**
     * @name keepCurrenKey
     * @description 增删改的时候重新加载树形结构并且保持原状态
     * @author wqy
     * @date 2019-10-31 15:39:02
     */
    async keepCurrenKey(id) {
      const data = {
        searchName: this.seachName_jg
      };
      const res = await this.$store.dispatch(
        "qxgl-yhzzgl/getDepartmentList",
        data
      );
      this.treeDate = res.data;
      this.currentId = id;
      this.currentNodekey = id;
      this.keysArr.push(id);
      const tree = this.$refs.tree;
      this.$nextTick(() => {
        tree.setCurrentKey(id);
        // getCurrentNode 获取当前选中的data
        const currentNode = this.$refs.tree.getCurrentNode();
        this.currentName = currentNode.zzjg_name;
        this.parentId = currentNode.parent_id;
        this.getUserByZzjg();
      });
    },
    /**
     * @name getUserByZzjg
     * @description 根据组织机构查询用户
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async getUserByZzjg() {
      this.tableData = [];
      this.allcheckbox = [];
      const data = {
        zzjgId: this.currentId,
        startPage: this.currentPage,
        pageSize: this.pageSize
      };
      const res = await this.$store.dispatch("qxgl-yhzzgl/getUserByZzjg", data);
      this.byJgFlag = true;
      if (res.data && res.data.total) {
        res.data.list.map(item => {
          item.isHover = false;
          this.allcheckbox = [...this.allcheckbox, item.id];
        });
        this.tableData = res.data.list;
        this.totalPage = res.data.total;
      } else {
        this.tableData = [];
        this.totalPage = 0;
      }
    },
    /**
     * @name seachBtn
     * @description 根据条件查询用户
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async seachBtn() {
      if (this.seachName == "") {
        this.$message({
          type: "warning",
          message: "搜索结果为空，可按用户姓名、职工号、手机号进行搜索!"
        });
        this.isEmpty = true;
        this.byJgFlag = false;
        this.currentNodekey = this.firstId; // 默认选中组织机构最高级
        this.keysArr.push(this.firstId);
        this.$nextTick(() => {
          const tree = this.$refs.tree;
          tree.setCurrentKey(this.firstId); // 指定选中的节点
        });
        return;
      }
      this.tableData = [];
      this.allcheckbox = [];
      const data = {
        searchName: this.seachName,
        startPage: this.currentPage,
        pageSize: this.pageSize
      };
      const res = await this.$store.dispatch(
        "qxgl-yhzzgl/getUserZzjgList",
        data
      );
      this.isEmpty = false;
      res.data.list.map(item => {
        item.checkId = item.id + "-" + item.zzjg_id;
        item.isHover = false;
        this.allcheckbox = [...this.allcheckbox, item.checkId];
      });
      this.tableData = res.data.list;
      this.totalPage = res.data.total;
      this.byJgFlag = false;
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.refesData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.refesData();
    },
    /**
     * @name refesData
     * @description 重新请求数据
     * @author wqy
     * @date 2019-11-01 11:32:28
     */
    refesData() {
      if (this.byJgFlag) {
        this.getUserByZzjg();
      } else {
        this.seachBtn();
      }
      // 清空多选框
      this.checkAll = false;
      this.isIndeterminate = false;
      this.checkList = [];
    },
    /**
     * @name handleCheckedCitiesChange
     * @description 单个选择
     * @author wqy
     * @date 2019-11-01 10:20:51
     */
    handleCheckedCitiesChange(val) {
      const checkedCount = val.length;
      this.checkAll = checkedCount === this.allcheckbox.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.allcheckbox.length;
    },
    /**
     * @name handleCheckAllChange
     * @description 全选
     * @author wqy
     * @date 2019-11-01 10:20:51
     */
    handleCheckAllChange(val) {
      this.checkList = val ? this.allcheckbox : [];
      this.isIndeterminate = false;
    },
    /**
     * @name tableHoverChange
     * @description 鼠标滑过
     * @author wqy
     * @date 2019-11-01 10:20:51
     */
    tableHoverChange(row) {
      row.isHover = true;
    },
    /**
     * @name tableLeaveChange
     * @description 鼠标离开
     * @author wqy
     * @date 2019-11-01 10:20:51
     */
    tableLeaveChange(row) {
      row.isHover = false;
    },
    /**
     * @name delUser
     * @description 删除用户
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async delPerson() {
      if (this.checkList.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择您要删除的用户!"
        });
        return;
      }
      this.$confirm("删除后将无法恢复，您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async() => {
          const checkIds = [];
          let userList = [];
          if (this.byJgFlag) {
            //  选择机构删除
            this.checkList.map(item => {
              userList = [
                ...userList,
                {
                  userId: item,
                  zzjgId: this.currentId
                }
              ];
            });
          } else {
            this.checkList.map(item => {
              userList = [
                ...userList,
                {
                  userId: item.split("-")[0],
                  zzjgId: item.split("-")[1]
                }
              ];
            });
          }
          const data = {
            userList: userList
          };
          const res = await this.$store.dispatch("qxgl-yhgl/deleteUser", data);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.refesData();
        })
        .catch(() => {});
    },

    /**
     * @name addUser
     * @description 添加用户
     * @author wqy
     * @date 2019-11-01 10:25:53
     */
    addUser() {
      this.form = {
        userCode: "",
        userName: "",
        pass: "",
        roleList: []
      };
      this.titleUser = "添加用户";
      this.isEdit = false;
      this.dialogVisible_addUser = true;
      this.$nextTick(() => {
        this.$refs["form"].resetFields();
      });
    },
    /**
     * @name editUser
     * @description 编辑用户
     * @author wqy
     * @date 2020-06-04 10:31:22
     */
    editUser(row) {
      this.isEdit = true;
      for (const key in this.form) {
        if (key != "roleList") {
          this.$set(this.form, key, row[key]);
        } else {
          this.form.roleList = row.roleList.map(item => {
            return item.id;
          });
        }
      }
      this.titleUser = "编辑用户";
      this.nowId = row.id;
      this.dialogVisible_addUser = true;
    },
    /**
     * @name sysRole
     * @description 获取所有的角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async sysRole() {
      const res = await this.$store.dispatch("qxgl-yhgl/sysRoleAll");
      if (res.status == 1000) {
        this.options_user = res.data;
      }
    },
    /**
     *
     * @name submitForm
     * @description 添加用户确认按钮
     * @author wqy
     * @date 2020-06-04 10:07:34
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.editUserSure();
          } else {
            this.addUserSure();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async addUserSure() {
      const res = await this.$store.dispatch("qxgl-yhgl/addUser", {
        userCode: this.form.userCode,
        userName: this.form.userName,
        password: this.form.pass,
        roleIdList: this.form.roleList,
        zzjgId: this.currentId
      });
      if (res.status == 1000) {
        this.$message({
          message: "添加用户成功!",
          type: "success"
        });
        this.refesData();
        this.dialogVisible_addUser = false;
      }
    },
    async editUserSure() {
      const res = await this.$store.dispatch("qxgl-yhgl/editUser", {
        userName: this.form.userName,
        id: this.nowId,
        roleIdList: this.form.roleList
      });
      if (res.status == 1000) {
        this.$message({
          message: "编辑用户成功!",
          type: "success"
        });
        this.refesData();
        this.dialogVisible_addUser = false;
      }
    },
    /**
     * @name setPsd
     * @description 设置密码-打开弹窗
     * @author wqy
     * @date 2019-11-01 10:26:07
     */
    setPsd(row) {
      this.password = "";
      this.currentUserName = row.userName;
      this.currentUserId = row.id;
      this.dialogVisible_psd = true;
    },
    /**
     * @name setPsd
     * @description 设置密码 确认
     * @author wqy
     * @date 2019-11-01 10:26:07
     */
    async submit_psd() {
      if (this.password == "") {
        this.$message({
          type: "warning",
          message: "请设置登录密码!"
        });
        return;
      }
      if (this.password.length < 6 || this.password.length > 11) {
        this.$message({
          type: "warning",
          message: "密码长度请设置在6~10个字符之间!"
        });
        return;
      }
      const res = await this.$store.dispatch("qxgl-yhzzgl/updatePassword", {
        id: this.currentUserId,
        password: this.password
      });
      this.dialogVisible_psd = false;
      this.refesData();
    },
    /**
     * @name exportAll
     * @description 导出全部
     * @author wqy
     * @date 2019-09-29 15:16:29
     */
    async exportAll() {
      this.$downloadFunc({
        url: "/web/trUserZzjg/admin/userZzjgExport",
        data: {},
        method: "post"
      });
    },
    /**
     * @name setFzr
     * @description 机构是否有负责人
     * @author wqy
     * @date 2019-09-29 15:16:29
     */
    async setFzr(row) {
      if (row.is_manager == 1) {
        return;
      }
      let tips = "设置";
      const res = await this.$store.dispatch("qxgl-yhzzgl/isManager", {
        zzjgId: this.currentId
      });
      if (res.data) {
        tips = "更改";
      }
      // 机构没有负责人可以直接设置
      this.$confirm("是否将负责人" + tips + "为" + row.userName + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async() => {
          this.setFzr_btn(row);
        })
        .catch(() => {});
    },
    /**
     * @name setFzr
     * @description 设置负责人
     * @author wqy
     * @date 2019-09-29 15:16:29
     */
    async setFzr_btn(row) {
      let zzjgId = "";
      if (this.byJgFlag) {
        zzjgId = this.currentId;
      } else {
        zzjgId = row.zzjg_id;
      }
      const res = await this.$store.dispatch("qxgl-yhzzgl/addManager", {
        zzjgId: zzjgId,
        id: row.id
      });
      this.$message({
        type: "success",
        message: "设置负责人成功!"
      });
      if (this.byJgFlag) {
        this.getUserByZzjg();
      } else {
        this.seachBtn();
      }
    },
    /**
     * @name showEmpty
     * @description 输入框右焦点的时候
     * @author wqy
     * @date 2019-11-19 14:30:57
     */
    showEmpty() {
      this.resetData();
      this.byJgFlag = false;
      // 显示孔图
      this.isEmpty = true;
      // 记录当前的机构id
      this.emptyCurrentId = this.currentId;
      // 点击全局最高级别机构
      this.currentNodekey = this.firstId;
      this.keysArr.push(this.firstId);
      this.$nextTick(() => {
        const tree = this.$refs.tree;
        tree.setCurrentKey(this.firstId); // 指定选中的节点
      });
    },
    /**
     * @name clearInPut
     * @description 输入框清除
     * @author wqy
     * @date 2019-11-19 14:30:57
     */
    clearInPut() {
      this.resetData();
      this.byJgFlag = true;
      // 显示孔图
      this.isEmpty = false;
      // 点击全局最高级别机构
      this.currentNodekey = this.emptyCurrentId;
      this.keysArr.push(this.emptyCurrentId);
      this.$nextTick(() => {
        const tree = this.$refs.tree;
        tree.setCurrentKey(this.emptyCurrentId); // 指定选中的节点
        const currentNode = this.$refs.tree.getCurrentNode();
        this.currentName = currentNode.zzjg_name;
        this.parentId = currentNode.parent_id;
        // 请求右侧的列表
        this.getUserByZzjg();
      });
    },
    /**
     * @name resetData
     * @description
     * @author wqy
     * @date 2020-06-04 14:37:52
     */
    resetData() {
      this.tableData = [];
      this.currentPage = 1;
      this.pageSize = 10;
      this.totalPage = 0;
      this.checkAll = false;
      this.isIndeterminate = false;
      this.checkList = [];
      this.allcheckbox = [];
    }
  }
};
</script>
<style lang="scss"  scoped>
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.content {
  position: relative;
}
.left {
  width: 310px;
  padding: 20px 15px;
  position: absolute;
}
.right {
  margin-left: 340px;
  min-height: 794px;
}
.checkAll {
  position: absolute;
  left: 11px;
  top: 15px;
}
.btnItem {
  display: inline-block;
  font-size: 14px;
  color: #5f5e5c;
  padding-right: 25px;
  cursor: pointer;
  padding-left: 8px;
}
.btnItem span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
}
.add {
  background-color: #70b2ee;
}
.edit {
  background-color: #08d594;
}
.del {
  background-color: #fe8a8a;
}
.btnItem span i {
  font-size: 14px;
  color: #fff;
}
.overSpan {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imgIsManager img {
  display: inline-block;
  width: 18px;
  vertical-align: middle;
}
.qjSeach {
  text-align: right;
  margin-bottom: 5px;
}
.qjSeach .seachInput {
  width: 260px;
}
.noData {
  padding-top: 150px;
  height: 670px;
  text-align: center;
}
.noData img {
  width: 328px;
}
.jd-wd-wrap {
  .jd-wd-item {
    display: inline-block;
    width: 400px;
    /deep/ {
      .el-input {
        width: 300px;
      }
    }
  }
}
</style>
